require('./index.scss');
var template = require('./template.html');

var comp = avalon.component('ms-sel', {
    template: template,
    defaults: {
        text:'',
        val:'',
        dropdownData:{
            checkedItem:'',
            model:'',
            list:[{
                val:"11",
                text:"text11",
            },{
                val:"22",
                text:"text22",
            },{
                val:"33",
                text:"text33",
            }],
            changefn:function(){}
        },
        changeClick:function(el){
            var that = this;
            if(el.val!=that.dropdownData.model){
                that.dropdownData.checkedItem = el;
                that.dropdownData.model = el[that.val];
                that.dropdownData.changefn && that.dropdownData.changefn(el.$model);
                console.log('changeClick',el,that.dropdownData);
            }
        },
        onInit:function(e){
            var that = this;
            // console.log('onInit this', this);
            if(that.dropdownData.list.length>0){
                var firstData = that.dropdownData.list[0];
                that.dropdownData.checkedItem = firstData;
                that.dropdownData.model = firstData[that.val];
            }
        },
        onReady:function(e){
            var that = this;
            // console.log('e', e);
            // console.log('this', this);
            var $box = $(e.target),
                $checked = $box.find('.checked'),
                $listBox = $box.find('.dropdown-list');
            
            this.text = $box.attr('text');
            this.val = $box.attr('val');
            this.$watch('dropdownData.list',function(newval){
                var firstData = that.dropdownData.list[0];
                that.dropdownData.checkedItem = firstData;
                that.dropdownData.model = firstData[that.val];
            });
            $box.on('click',function(){
                $listBox.slideToggle('fast');
            });
        }
    }
});

module.exports = comp;